import React, {useRef,} from 'react'
import {connect,} from 'react-redux'
import {Icon,} from "antd-mobile"
import {withRouter} from 'react-router-dom'

// components
import NewsCard from "../../../../../../shared-components/NewsCard/NewsCard"
import BgNewsCard from "../../../../../../shared-components/BgNewsCard/BgNewsCard"
import Jian from "../../../../../../res/images/web/home/jian@2x.png"
import ImageCarousel from "../ImageCarousel/ImageCarousel";
import {addHitCount} from "../../../../../../apis/goApis";
import RandomVote from "../random-vote/random-vote";

const HotNews = (props) => {

    const {history, newsList} = props
    const newsCtn = useRef(null)
    const news = newsList.slice(3, 11)

    // const news = newsList

    const goToNews = (news) => {
        addHitCount('news', {id: 0, title: news.title,})
        history.push(`./news/${news.id}`)
    }

    const newsTemplate = news.map((n, i) => {
        // if (i === 0 || i % 4 === 0) {
        if (i === 3) {
            return (
                <div  key={i}>
                    <div
                        // onClick={() => history.push(`./news/${n.id}`)}
                         onClick={() => goToNews(n)}
                    >
                        {/*<WhiteSpace size='xl'/>*/}
                        <BgNewsCard news={n}/>
                    </div>
                    <RandomVote />
                </div>
            )
        }
        return (
            <div key={i}
                 // onClick={() => history.push(`./news/${n.id}`)}
                 ref={newsCtn}
                 onClick={() => goToNews(n)}
            >
                {/*<WhiteSpace/>*/}
                <NewsCard  news={n}/>
            </div>
        )
    })





    const title = <div className='flex-space-between-align-center' style={{backgroundColor: '#fff', padding: 12,}}>
        <div className='flex-align-center'>
            <img src={Jian} alt='' style={{height: 16, width: 16, marginRight: '4px',}}/>
            <span style={{fontSize: 16,}}>小应推荐</span>
        </div>
        <div onClick={(e) => props.history.push('./newslist')}>
            <Icon type='right' color='#A6B0B7'/>
        </div>
    </div>

    const bottom = <div
        style={{
            marginTop: '1px',
            height: '44px',
            textAlign: 'center',
            background: '#fff',
        }}
        onClick={(e) => props.history.push('./newslist')}
    >

        <span style={{lineHeight: '44px', color: '#FFA500', fontSize: 16,}}>点击查看更多资讯</span>
    </div>

    return (
        <>
            {/*{title}*/}
            <div
                // onTouchStart={(e) => onTouchStart(e)}
                // onTouchEnd={(e) => onTouchEnd(e, newsCtn)}
            >

                <ImageCarousel />
                <RandomVote />
                {/*<LinkTitle*/}
                {/*    title='热门推荐'*/}
                {/*    path='newslist'*/}
                {/*/>*/}
                {/*<WhiteSpace />*/}
                {newsTemplate}
                {/*{endId <= 50 && !touched ? <div style={{textAlign: 'center'}}>滑动加载更多精彩内容</div> : null}*/}
                {/*{endId <= 50 && touched ? <div style={{textAlign: 'center'}}>松开即可加载更多</div> : null}*/}
                {/*{endId > 50 ? <div style={{textAlign: 'center'}}>已经没有新闻了~</div> : null}*/}
                {bottom}
            </div>

        </>
    )
}

const mapState = state => ({
    newsList: state.news.newsList,
})

const mapDispatch = dispatch => ({
    doFetchNewsList: (payload) => dispatch.news.doFetchNewsList(payload),
})

export default connect(mapState, mapDispatch)(withRouter(HotNews))
